Creating background matting in GIF and PNG images

When you know the Web page background color on which an image will be displayed, you can use the matting feature to fill or blend transparent pixels with a matte color that matches the Web page background. The Web page background must be a solid color, not a pattern.

You can matte GIF and PNG images in two ways. You can choose to preserve fully transparent pixels as transparent, and matte only the partially transparent pixels, such as those at the edge of an anti-aliased image. When the image is placed on a Web page, the Web background shows through the transparent pixels, and the edges of the image blend with the background. This feature prevents the halo effect that results when an anti-aliased image is placed on a background color that differs from the image's original background. This feature also prevents the jagged edges that result with GIF hard-edged transparency.

You can also deselect Transparency to fill all transparent pixels with the matte color. Fully transparent pixels are filled with the matte color, and partially transparent pixels are blended with the matte color.

To create a matted GIF or PNG image:

1 Import a Smart Photoshop image that contains transparency or select a Smart Photoshop object already on a Web page and click Settings in the Smart Image Inspector.

2 In the Optimize panel in the Save For Web dialog box, select GIF, PNG-8, or PNG-24 from the format menu.

3 Choose whether to preserve transparency:

4 Select a color from the Matte pop-up menu.

Select None, Eyedropper Color (to use the color in the eyedropper sample box), White, Black, or Other (using the color picker).

Images and Page Design > Making transparent and matted Photoshop images > Creating background matting in GIF and PNG images